<template>
	<view :class="'container  ' + (mode_ === 'night' ? 'night' : '')" 
	style="background-image: url('/static/assets/bg.png')">
		<view class="banner" >
			<div class="top-banner" style="background-image: url('/static/assets/1.png')">
			<!-- 	<image src="/static/assets/1.png" mode="center"
					class="banner-img"></image> -->
				<text class="banner-text bottom left">Read more,Get more.</text>
			</div>
		</view>
		<view class="box">
			<view class="sbox1" @tap="onDisplay">
				<view class="sbox-item">
					<view>每日打卡</view>
					<view>Keep</view>
					<view>Going</view>
				</view>
				<view class="icons">
						<image src="/static/assets/s1.png" class="iconimg"></image>						
				</view>	
			</view>
			<view class="sbox2" @tap="tothoughts">
				<view class="sbox-item">
					<view>阅读有感</view>
					<view>Reading</view>
					<view>Thoughts</view>
				</view>
				<view class="icons">
						<image src="/static/assets/s2.png" class="iconimg"></image>						
				</view>				
			</view>
			<view class="sbox3" @tap="toRecord">
				<view class="sbox-item">
					<view>阅读记录</view>
					<view>Reading</view>
					<view>Records</view>
				</view>
				<view class="icons">
						<image src="/static/assets/s3.png" class="iconimg"></image>						
				</view>	
			</view>
			<view class="sbox4" @tap="tothoughtsRecord">
				<view class="sbox-item">
					<view>那年今日</view>
					<view>Past</view>
					<view>Thoughts</view>
				</view>
				<view class="icons">
						<image src="/static/assets/s4.png" class="iconimg"></image>						
				</view>	
			</view>
			
		</view>
		<idea title="今日阅读" :ideaList="articleInfo" @click="toArticleDetail"></idea>
		<van-calendar :show="show" confirm-text="打卡" readonly @close="onClose"
		@confirm="onConfirm":dakaDate="dakaDays" />
		<view class="notify">
			<van-notify id="van-notify" />
		</view>
	</view>
	
</template>

<script>
	import idea from '@/component/idea/index';
	import jumpTo from '../../utils/jumpTo';
	import Notify from '@/static/miniprogram_npm/@vant/weapp/notify/notify';
	import Dialog from '@/static/miniprogram_npm/@vant/weapp/dialog/dialog';
	import {
		createStoreBindings
	} from '@/static/miniprogram_npm/mobx-miniprogram-bindings';
	import {
		store
	} from '../../store/store';
	import {
		getArticle
	} from '../../service/article.service';
	// import {
	// 	loadIdea,
	// 	postIdea,
	// 	forkIdea
	// } from '../../service/idea.service';
	export default {
		components: {
			idea
		},
		data() {
			return {
				show: false,
				date: 0,
				dakaDays: [],
				mode_: '',
				articleInfo: [
					
				],
				offset: 0,
				flag: 1
			};
		},
		onLoad(options) {
			
			this.storeBindings = createStoreBindings(this, {
				store,
				field: ['mode', 'openID'],
				actions: ['getMode', 'getOpenID']
			});
			let dakaDays = uni.getStorageSync('daka');
			let localToMonth = uni.getStorageSync('toMonth');
			
			if (localToMonth === '') {
				uni.setStorageSync('toMonth', toMonth);
			}
			
			if (dakaDays === '') {
				dakaDays = [];
				uni.setStorageSync('daka', dakaDays);
				return;
			}
			
			let date = new Date(); // let today = new Date().getDate();
			
			let toMonth = uni.getStorageSync('toMonth');
			let toMonth_ = date.getMonth();
			
			if (toMonth != toMonth_) {
				console.log('本月第一次打开该页面');
				uni.setStorageSync('daka', []);
				dakaDays = [];
				uni.setStorageSync('toMonth', toMonth_);
			}
			
			this.setData({
				dakaDays
			});
			// this.fetchArticle(); 
		},
		onShow() {
			this.setData({
				mode_: this.getMode()
			});
		},
		onUnload() {
			this.storeBindings.destroyStoreBindings();
		},
		methods: {
			async fetchArticle() {
				const res = await getArticle();
				this.setData({
					articleInfo: res.data.data
				});
				console.log(this.articleInfo);
			},
			onDisplay() {
				this.show=true;
			},
			
			onClose() {
				this.show=false;
			},
			
			onConfirm(event) {
				// console.log(this.data.dakaDays)
				this.setData({
					show: false,
					date: this.formatDate(event.detail)
				});
				let dakaDays = this.dakaDays;
				let date = new Date().getDate();
			
				if (!dakaDays[date]) {
					dakaDays[date] = true;
					uni.setStorageSync('daka', dakaDays);
				}
			
				this.setData({
					dakaDays
				});
				Notify({
					message: '打卡成功',
					color: '#dd0000',
					type: 'success',
					duration: 800
				});
			},
			
			formatDate(date) {
				date = new Date(date);
				return date.getDate();
			},
			tothoughtsRecord() {
				const openID = this.getOpenID();
				jumpTo('../../pages-find/pages/thoughtsBook/index?openID=' + openID);
			},
			tothoughts() {
				const openID = this.getOpenID();
				jumpTo('../../pages-find/pages/thoughts/index?openID=' + openID);
			},
			toRecord() {
				jumpTo('../../pages-find/pages/record/index');
			},
			toArticleDetail(e) {
				uni.navigateTo({
					
					url: '../../pages-home/pages/article-detail/index',
					success: function(res) {
						// 通过 eventChannel 向被打开页面传送数据
						res.eventChannel.emit('initData', e.detail);
					}
				});
			}
			
		}
	}
</script>

<style>
	.container {
		width: 100vw;
		position: relative;
		background-size: cover;
		transition: all 0.5s;
	}
	.top-banner {
		height: 320rpx;
		width: 95%;
		margin-left: 4%;
		position: absolute;
		overflow: hidden;
		border-radius:15px;
		background-size:100% 100%;
		background-repeat:no-repeat;
	}

	.banner {
		width: 86%;
		margin: 0 auto;
		position: relative;
		height: 300rpx;
	}

/* 	.banner-img {
		width: 110%;
		height: 100%;
	} */
	.icons{
		position:relative;
		left:180rpx;
		top:-100rpx;
		width:2rem;
	}
	.iconimg{
		height:2rem;
		width:2rem;
		color:rgb(#fff)
	}
	.container {
		width: 100vw;
		position: relative;
		transition: all 0.5s;
	}

	.banner-text {
		position: absolute;
		color: white;
		z-index: 10;
	}

	.top {
		top: 20rpx;
	}

	.bottom {
		bottom: 20rpx;
	}

	.left {
		left: 40rpx;
	}

	.right {
		right: 20rpx;
	}
	.box{
		margin-top:20px;
		display: flex;
		flex-wrap:wrap;
		height: 450rpx;
		background-size:100% 100%;
		background-repeat:no-repeat;
		justify-content:space-around;
	}
	.sbox1{
		height:5rem;
		width:40%;
		border:2px solid;
		border-radius:20px;
		background-color: #c8ff94;
	}
	.sbox2{
		height:5rem;
		width:40%;
		border:2px solid;
		border-radius:20px;
		background-color: #bc6eff;
	}
	.sbox3{
		height:5rem;
		width:40%;
		border:2px solid;
		border-radius:20px;
		background-color: #9ef6ff;
	}
	.sbox4{
		height:5rem;
		width:40%;
		border:2px solid;
		border-radius:20px;
		background-color: #ff82c5;
	}
	.sbox-item{
		margin-left:8px;
		margin-top:2px;
		justify-content: center;
		align-items: center;
		font-size: 0.8rem;
	}
	.night {
		background-color: black !important;
		color: #fff !important;
		filter: brightness(0.7);
	}
	.notify {
		position: absolute;
		top: 0;
	}
</style>
